<template>
  <a-drawer
    :width="600"
    :visible="show"
    :footer="false"
    @cancel="handleCancel"
    unmountOnClose
  >
    <template #title> {{ data?.type }}组件编辑 </template>
    <div class="seting-box">
      <p class="item-title">内容宽度</p>
      <a-select
        :style="{ width: '320px', background: '#ffffff' }"
        v-model="data.width"
        placeholder="Please select ..."
      >
        <a-option :value="800">Small Width</a-option>
        <a-option :value="952">Default Width</a-option>
        <a-option :value="1208">Middle Width</a-option>
        <a-option :value="1920">Max Width</a-option>
      </a-select>
      <p class="item-title">标题</p>
      <a-input v-model="data.title" placeholder="请输入标题" allow-clear />
      <p class="item-title">图片</p>
      <img class="item-img" :src="data.image" />
      <div class="item-uplaod flex items-center">
        <a-input
          v-model="data.image"
          placeholder="请输入图片链接"
          allow-clear
        />
        <Upload
          v-model="data.image"
          name="ContactUsInfo"
          button-class="fit-content"
        />
      </div>
      <p class="item-title">Image Alt</p>
      <a-input v-model="data.imageAlt" placeholder="请输入标题" allow-clear />
      <p class="item-title">
        Add Contact Method (This order will not be reflected on page.)
      </p>
      <a-button-group type="primary">
        <a-button v-if="!hasArr.includes('pin')" @click="addBtn('pin')">
          Address
        </a-button>
        <a-button
          v-if="!hasArr.includes('googleMap')"
          @click="addBtn('googleMap')"
        >
          Google Map
        </a-button>
        <a-button
          v-if="!hasArr.includes('baiduMap')"
          @click="addBtn('baiduMap')"
        >
          Baidu Map
        </a-button>
        <a-button v-if="!hasArr.includes('email')" @click="addBtn('email')">
          Email
        </a-button>
        <a-button v-if="!hasArr.includes('phone')" @click="addBtn('phone')">
          Phone
        </a-button>
        <a-button v-if="!hasArr.includes('fax')" @click="addBtn('fax')">
          Fax
        </a-button>
      </a-button-group>
      <!-- 详细 -->
      <div>
        <a-collapse>
          <a-collapse-item
            v-for="(item, index) in data.linkList"
            :header="item.type + item.text"
            :key="index"
          >
            <template #expand-icon>
              <!-- <icon-plus /> -->
            </template>
            <template #extra>
              <icon-close @click.stop="() => deleteItem(index)"></icon-close>
            </template>
            <div v-if="hasArr.includes(item.type)">
              <p>Text</p>
              <a-input
                v-model="item.text"
                placeholder="请输入内容"
                allow-clear
              />
              <p class="item-title">Link Type</p>
              <a-select
                :style="{ width: '320px', background: '#ffffff' }"
                v-model="item.linkType"
                placeholder="Please select ..."
              >
                <a-option value="internalLink">Internal Link</a-option>
                <a-option value="externalLink">External Link</a-option>
                <a-option value="textOnly">Text-only</a-option>
              </a-select>
              <p class="item-title">Url</p>
              <a-input v-model="item.url" allow-clear />
            </div>
          </a-collapse-item>
        </a-collapse>
      </div>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import Upload from "@/common/Upload/index.vue";
import { ref } from "vue";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },

  data: {
    type: Object,
    default: () => {},
  },
});
const hasArr = ref<string[]>([]);
const emit = defineEmits(["update:show"]);

const handleCancel = () => {
  emit("update:show", false);
};
const deleteItem = (index: number) => {
  hasArr.value = hasArr.value.filter(
    (item) => item !== props.data.linkList[index].type
  );
  props.data.linkList.splice(index, 1);
};
const addBtn = (type: string) => {
  if (hasArr.value.includes(type)) {
    return;
  }
  hasArr.value.push(type);
  props.data.linkList.push({
    type,
    text: "",
    url: "",
    linkType: "textOnly",
  });
  // props.data.data.push({
  //   type,
  //   text: "",
  //   url: "",
  //   isExternal: false,
  // });
};
</script>

<style lang="scss" scoped>
.item-title {
  padding: 12px 0 8px 0;
  font-size: 14px;
  font-weight: 600;
}
.item-img {
  height: 100px;
}
.seting-box {
  padding: 20px;
  background: #f0f2f5;
  border-radius: 3px;
  .arco-input-wrapper {
    background: #ffffff;
  }
}
.setting-content {
  .setting-header {
    padding-bottom: 12px;

    .header-title {
      width: 120px;
      padding-right: 12px;
      text-align: right;
    }
  }

  .setting-body {
    margin-top: 12px;

    .setting-item {
      position: relative;
      padding: 16px 12px;
      background: #f0f2f5;
      border-radius: 8px;
      margin-bottom: 20px;

      .btn-group {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
        padding: 4px;

        .btn-delete {
          padding: 4px;
          font-size: 24px;
          cursor: pointer;
        }
      }

      .item-name {
        font-size: 16px;
        font-weight: 600;
        padding-bottom: 10px;
        border-bottom: 1px solid #fff;
      }

      .arco-input-wrapper {
        background: #fff;
      }

      .item-button {
        position: relative;
        padding: 12px 8px 4px;
        background: #fff;
        border-radius: 4px;
        margin: 4px 0;
        transition: all 0.3s ease;

        &.draggable-item {          &:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transform: translateY(-1px);
          }

          // 当禁用拖拽时，不显示拖拽效果
          &.sortable-disabled {
            cursor: default;

            &:hover {
              box-shadow: none;
              transform: none;
            }
          }
        }

        .arco-input-wrapper {
          background: #f2f3f5;
        }
      }

      // 拖拽相关样式
      .flip-list-move {
        transition: transform 0.5s;
      }

      .no-move {
        transition: transform 0s;
      }

      .ghost {
        opacity: 0.5;
        background: #c8ebfb;
      }

      .list-group {
        min-height: 20px;
      }

      .list-group-item {      }

      .list-group-item i {
        cursor: pointer;
      }

      .item-action {
        padding: 10px 0;

        .action-text {
          width: 150px;
          margin-right: 8px;
        }
      }

      .item-add-btn {
        display: inline-block;
        padding: 2px 8px;
        margin-top: 5px;
        font-size: 11px;
        color: #165dff;
        border-radius: 4px;
        font-weight: 600;
        border: 1px solid #165dff;
        cursor: pointer;
      }

      .item-img {
        margin-top: 12px;
        height: 160px;
      }

      .fit-content {
        width: fit-content;
      }

      .item-img-list {
        .img-list-item {
          margin: 4px 0;
          position: relative;
          padding: 8px;
          border-radius: 4px;
          transition: all 0.3s ease;
          background: #fff;
          border-radius: 4px;

          &.draggable-item {            &:hover {
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
              transform: translateY(-1px);
            }

            // 当禁用拖拽时，不显示拖拽效果
            &.sortable-disabled {
              cursor: default;

              &:hover {
                box-shadow: none;
                transform: none;
              }
            }
          }

          .arco-input-wrapper {
            background: #f2f3f5;
          }

          .img-drag-handle {
            top: 0 !important;
          }
        }

        .item-img-box {
          margin-right: 12px;
          position: relative;
          width: 133px;
          height: 100px;

          .item-img-dlete {
            position: absolute;
            padding: 8px;
            font-size: 32px;
            top: -16px;
            right: -16px;
            color: red;
            cursor: pointer;
          }
        }

        .small-img {
          margin: 0;
          height: 100px;
          object-fit: cover;
        }

        .item-right {
          padding-top: 24px;
        }
      }
    }
  }

  .drag-handle {
    padding: 4px;
    cursor: grab;
    padding: 4px;
    border-radius: 4px;

    &:hover {
      background-color: #f0f2f5;
    }

    &:active {
      cursor: grabbing;
    }

    .drag-icon {
      font-size: 16px;
      color: #86909c;
    }
  }
}
</style>
